<template>
  <div class="audio_box">
    <div class="player">
      <div class="player_left">
        <div id="box" class="photo pause paused">
          <img
            src="https://p1.music.126.net/rZiMebYAY25JnhKY4OIWog==/109951163305528890.jpg?param=130y130"
            alt=""
          />
        </div>
        <div class="text">Stitches(Sascha Morgan)</div>

      <audio controls style="display: none;" ref="audioRef">
        <source src="../assets/music/Stitches.mp3" type="audio/mpeg">
      </audio>
      </div>
      <div class="player_right">
        <div class="player_button" @click="playMusic">
          <van-icon v-if="!isPlayer" name="play-circle-o" size="35px" />
          <van-icon v-else name="pause-circle-o" size="35px" />
          <audio src="../assets/music/Stitches.mp3"> </audio>
        </div>
        <div class="player_list">
          <van-icon name="bars" size="35px" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
    import { ref } from "vue";
 
    let isPlayer = ref(false);
    let isRotating = ref(false);

    const AudioObj = new Audio();
    //设置音乐路径
    AudioObj.src = new URL('../assets/music/Stitches.mp3',import.meta.url);


    //toggleRotation();
    function toggleRotation() {
        isRotating.value = !isRotating.value;
        if (isRotating.value) {
            document.getElementById("box").classList.remove("paused");
        } else {
            document.getElementById("box").classList.add("paused");
        }
    }
    //播放
    function playMusic() {
        toggleRotation();

        if (isPlayer.value) {
            AudioObj.pause();
        } else {
          AudioObj.load();
          AudioObj.play();
        
        }
        isPlayer.value = !isPlayer.value;
    }
</script>

<style scoped>
.audio_box {
  border-top: 1px solid #ccc;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 95%;
  background-color: #fff;
}
.audio_box .player {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.player_left,
.player_right {
  display: flex;
  align-items: center;
}
.player_left .photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.5s ease;
}
.player_left .photo img {
  width: 100%;
  height: 100%;
}
.player_left .text {
  margin-left: 20px;
}
.player_right .player_button {
  margin-right: 10px;
}
#box {
  animation: rotateAnimation 2s infinite linear;
}
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#box.paused {
  animation-play-state: paused;
}
</style>
    
